<template>
  <Card class="card_style_s_setting" :bordered="false" :dis-hover="true">
    <Row style="margin-bottom: 10px;">
      <Col span="6">
        <span>名称：</span>
        <Input style="width: 70%;" v-model="search_title" placeholder="业务组名称" @on-change="searchData1"/>
      </Col>
      <Button type="info" @click="filterData"><Icon type="ios-search" /> 搜索</Button>
      <Button type="info" @click="addInfo" style="margin-left: 10px"><Icon type="md-add" /> 添加业务组</Button>
    </Row>
    <Table border :columns="columns1" :data="datalist"></Table>

    <Modal v-model="modalInfo.modal1" title="业务组信息" width="700" cancel-text="关闭"
    @on-ok="okok" @on-cancel="modalInfo.modal1 = false" ok-text="确定">
      <Form :model="modalInfo"  >
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right">业务组名称：</Col>
          <Col span="12">
            <Input v-model="modalInfo.title"></Input>
          </Col>
        </Row>
        <Row class="item_s_setting">
          <Col span="7" style="text-align: right" class="">状态：</Col>
          <Col span="12">
            <RadioGroup v-model="modalInfo.status">
              <Radio label="可用"></Radio>
              <Radio label="不可用"></Radio>
            </RadioGroup>
          </Col>
        </Row>
        <Table border ref="selection" :columns="columns4" :data="data_standard_list1" @on-selection-change="change1">
          <template slot-scope="{ row, index }" slot="input_number">
            <Input type="number" v-model="row.number" @on-change="chengeNumber(row.number, index)"></Input>
          </template>
        </Table>
      </Form>
    </Modal>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      modalInfo: { modal1: false },
      search_title: '',
      columns1: [
        { title: '序号', type: 'index', width: '100', align: 'center' },
        { title: '业务组名称', key: 'title' },
        { title: '当前总分（分）', key: 'total_number', width: '200', align: 'center' },
        { title: '状态', key: 'status', width: '150', align: 'center' },
        {
          title: '操作',
          key: 'action',
          width: '270',
          className: 'nopadding',
          align: 'center',
          render: (h, params) => {
            let array = []
            array.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.showInfo(params.row)
                  }
                }
              }, '编辑')
            )
            array.push(
              h('Button', {
                props: { type: 'info', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    let title = ''
                    if (params.row.status === '可用') {
                      title = '确认停用当前规则！'
                    } else {
                      title = '确认启用当前规则！'
                    }
                    this.$Modal.confirm({
                      title: title,
                      onOk: () => {
                        params.row.status = params.row.status === '可用' ? '不可用' : '可用'
                      }
                    })
                  }
                }
              }, params.row.status === '可用' ? '停用' : '启用')
            )
            array.push(
              h('Button', {
                props: { type: 'error', size: 'small' },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.deleteInfo(params.row)
                  }
                }
              }, '删除')
            )
            return h('div', array)
          }
        }
      ],
      columns4: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '规则名称', key: 'title' },
        {
          title: '分数范围',
          key: 'min_number',
          width: '180',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.min_number + ' - ' + params.row.max_number + '分')
          }
        },
        {
          title: '分数',
          slot: 'input_number',
          width: '130',
          align: 'center'
        }
      ],
      datalist: [],
      datalist_bak: [],
      // 业务组备选规则列表
      data_standard_list: [],
      data_standard_list1: []
    }
  },
  methods: {
    filterData () {
      this.datalist = []
      if (this.search_title) {
        this.datalist_bak.forEach(element => {
          if (element.title.indexOf(this.search_title) >= 0) {
            this.datalist.push(element)
          }
        })
      } else {
        this.datalist = this.datalist_bak
      }
    },
    searchData1 () {
      if (!this.search_title) {
        this.filterData()
      }
    },
    addInfo () {
      this.data_standard_list1 = []
      this.data_standard_list.forEach(element => {
        element._checked = false
        delete element.number
        this.data_standard_list1.push(element)
      })
      this.modalInfo = { modal1: true, total_number: 0, status: '不可用', standard_ids: [] }
    },
    showInfo (obj) {
      this.data_standard_list.forEach(element => {
        element._checked = false
        delete element.number
      })
      obj.standard_ids.forEach(element => {
        for (let i = 0; i < this.data_standard_list.length; i++) {
          let temp1 = this.data_standard_list[i]
          if (element.id === temp1.id) {
            temp1._checked = true
            temp1.number = element.number
            break
          }
        }
      })
      this.data_standard_list1 = []
      this.data_standard_list.forEach(element => {
        this.data_standard_list1.push(element)
      })
      this.modalInfo = {
        modal1: true,
        index: obj._index,
        title: obj.title,
        status: obj.status,
        standard_ids: obj.standard_ids
      }
    },
    deleteInfo (obj) {
      this.$Modal.confirm({
        title: '确认删除当前业务组！',
        onOk: () => {
          this.datalist.splice(obj._index, 1)
          this.$Notice.success({ title: '成功' })
        }
      })
    },
    okok () {
      this.modalInfo.total_number = 0
      this.modalInfo.standard_ids = []
      this.data_standard_list1.forEach(element => {
        if (element._checked) {
          this.modalInfo.total_number += element.number || element.min_number
          this.modalInfo.standard_ids.push({ id: element.id, number: element.number || element.min_number })
        }
      })
      let temp = this.datalist[this.modalInfo.index] || {}
      temp.title = this.modalInfo.title
      temp.standard_ids = this.modalInfo.standard_ids
      temp.total_number = this.modalInfo.total_number
      temp.status = this.modalInfo.status
      if (this.modalInfo.index || this.modalInfo.index >= 0) {
        console.log(temp)
      } else {
        this.datalist_bak.push(temp)
        this.filterData()
      }
    },
    change1 (selection) {
      let tempids = ','
      selection.forEach(element => {
        tempids += element.id + ','
      })
      this.data_standard_list1.forEach(element => {
        element._checked = false
        if (tempids.indexOf(',' + element.id + ',') >= 0) {
          element._checked = true
        }
      })
    },
    chengeNumber (number, index) {
      let temp = this.data_standard_list1[index]
      if (number < temp.min_number) {
        temp.number = temp.min_number
      } else if (number > temp.max_number) {
        temp.number = temp.max_number
      } else {
        temp.number = parseInt(number)
      }
    }
  },
  mounted () {
    this.data_standard_list.push({ id: '1', title: '创新思路', min_number: 1, max_number: 10 })
    this.data_standard_list.push({ id: '2', title: '技术应用', min_number: 5, max_number: 10 })
    this.data_standard_list.push({ id: '3', title: '解决问题', min_number: 1, max_number: 20 })
    this.data_standard_list.push({ id: '4', title: '推广问题', min_number: 1, max_number: 10 })
    this.data_standard_list.push({ id: '5', title: '问题的可行性分析', min_number: 1, max_number: 10 })
    this.data_standard_list.push({ id: '6', title: '事项问题的跟进', min_number: 1, max_number: 10 })
    this.data_standard_list.push({ id: '7', title: '阶段性报告', min_number: 1, max_number: 10 })
    this.datalist_bak.push({
      title: '创新性问题业务',
      total_number: 10,
      status: '可用',
      standard_ids: [{ id: '1', number: 5 }, { id: '2', number: 5 }]
    })
    this.datalist_bak.push({
      title: '新技术应用推广',
      total_number: 20,
      status: '可用',
      standard_ids: [{ id: '2', number: 5 }, { id: '3', number: 10 }, { id: '4', number: 5 }]
    })
    this.datalist_bak.push({
      title: '旧问题的分析跟进',
      total_number: 15,
      status: '可用',
      standard_ids: [{ id: '5', number: 5 }, { id: '6', number: 10 }]
    })
    this.datalist_bak.push({
      title: '阶段报告',
      total_number: 30,
      status: '可用',
      standard_ids: [{ id: '7', number: 30 }]
    })
    this.filterData()
  }
}
</script>

<style lang="less">
  .card_style_s_setting {
      height: 100%;
      width: 100%;
      overflow: hidden;
  }
    .ivu-card-body {
      padding: 0px;
    }

  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item_s_setting {
    height: 42px;
    line-height: 40px;
  }
</style>
